<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <div class="mt-11">
          <span class="display-2 font-weight-bold" style="color:#2B81D6;"
            >一个创作者的分享平台</span
          >
        </div>
        <div class="mt-6">
          <span class="title font-weight-thin" style="color:#2B81D6;"
            >友聊</span
          >
          <span class="title font-weight-light mx-2"> | </span>
          <span class="title font-weight-regular">一个文章分享的平台</span>
        </div>
        <div class="mt-3">
          <span class="body-1 font-weight-thin"
            >无论你在创作什么，都可以在这里展示你的想法，让创作更自由</span
          >
        </div>
        <div class="mt-6">
          <v-btn color="primary" @click="$router.push('/article/2')">开始探索🛴</v-btn>
        </div>
      </v-col>
    </v-row>
    <div class="mt-12" style="text-align:center;">
      <span class="headline font-weight-bold" style="color:#3787D7;"
        >近期文章</span
      >
    </div>
    <div class="mt-9">
      <v-row>
        <v-col
          v-for="article in articles"
          :key="article.pk"
          cols="12"
          md="4"
          class="mt-1"
        >
          <div>
            <v-card height="546" class="mx-auto" @click="fetchDet(article.pk)">
              <v-img :src="article.fields.cover_image" height="394"></v-img>
              <v-list-item>
                <v-list-item-avatar
                  @click="$router.push(`/creater/${article.fields.name[0]}`)"
                >
                  <v-img
                    class="elevation-6"
                    :src="article.fields.name[1]"
                  ></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title class="headline">{{
                    article.fields.title
                  }}</v-list-item-title>
                  <v-list-item-subtitle>{{
                    article.fields.name[0]
                  }}</v-list-item-subtitle>
                </v-list-item-content>
                <v-btn color="primary">{{ article.fields.category }}</v-btn>
              </v-list-item>

              <v-card-text>
              {{replace(article.fields.content.slice(0, 42))+'...'}}
              </v-card-text>
            </v-card>
          </div>
        </v-col>
      </v-row>
    </div>
    <div class="mt-8" style="text-align:center;">
      <v-btn color="primary" @click="$router.push('/explore')">发现更多</v-btn>
    </div>
    <div class="mt-9" style="text-align:center;">
      <v-row>
        <v-col cols="12" md="6">
          <img src="@/assets/welcome/welcome-plan@2x.png" style="width:100%" alt="">
        </v-col>
        <v-col cols="12" md="6">
          <div class="mt-11">
            <span class="display-1 font-weight-bold">优秀的文章列表</span>
          </div>
          <div class="mt-3">
            <span>每天有许多的优秀创作者发表他们的想法</span>
          </div>
        </v-col>
      </v-row>
    </div>
    <div class="mt-9" style="text-align:center;">
      <v-row>
        <v-col cols="12" md="6">
          <div class="mt-11">
            <span class="display-1 font-weight-bold">账号系统的实现</span>
          </div>
          <div class="mt-3">
            <span>登录友聊，你可以关注你喜欢的作者</span>
          </div>
        </v-col>
        <v-col cols="12" md="6">
          <img src="@/assets/welcome/welcome-comment@2x.png" style="width:100%" alt="">
        </v-col>
      </v-row>
    </div>
    <div class="mt-9 pb-11" style="text-align:center;">
      <v-row>
        <v-col cols="12" md="6">
          <img src="@/assets/welcome/welcome-fans@2x.png" style="width:100%" alt="">
        </v-col>
        <v-col cols="12" md="6">
          <div class="mt-11">
            <span class="display-1 font-weight-bold">你也可以成为创作者</span>
          </div>
          <div class="mt-3">
            <span>快来发表你的第一篇文章吧！</span>
          </div>
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      articles: []
    };
  },
  methods: {
    async fetch() {
      try {
        const res = await this.$http.get("article_list/?page=1");
        this.articles = res.data.list;
        this.articles = this.articles.slice(0, 6);
        this.articles.forEach(art => {
          art.fields.cover_image = require(art.fields.cover_image);
          art.fields.name[1] = require(art.fields.name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    fetchDet(id) {
      this.$router.push(`/article/${id}`)
    },
    replace(str){
      let con = str.replace(/\s*/g, "");  //去掉空格
      let res =con.replace(/<[^>]+>/g, ""); //去掉所有的html标记
      let res1 = res.replace(/↵/g, "");     //去掉所有的↵符号
      let res2 = res1.replace(/[\r\n]/g, "") //去掉回车换行
      return res2
    }
  },
  created() {
    this.fetch();
    this.$vuetify.goTo(0);
  }
};
</script>
